<template>
  <div id="app">
    <!-- <a href="/home">主页</a>&nbsp;
      <a href="/product">产品</a> &nbsp;
      <a href="/about">关于我们</a> &nbsp; -->

    <router-link to="/home">主页</router-link>&nbsp;
    <!-- <router-link to="/product?name=产品&age20">产品</router-link>&nbsp; -->
    <router-link :to="{ name: 'product', query: { name: '你好', age: 22 } }"
      >产品</router-link
    >&nbsp;
    <!-- <router-link to="/about/8">关于我们</router-link>&nbsp; -->
    <router-link :to="{ name: 'about', params: { id: 9 } }"
      >关于我们</router-link
    >
    <button @click="gohome">主页</button>
    <button @click="goproduct">产品</button>
    <button @click="goabout">关于我们</button>
    <button @click="goback">点击我操作地址栏的历史记录后退</button>
    <button @click="gohistory1">点击我回退指定历史记录-2</button>
     <button @click="gohistory2">点击我回退指定历史记录2</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    gohome() {
      console.log("gohome", this.$route);
      // 本路由不能跳转自己
      if (this.$route.name != "home") {
        this.$router.push("/home");
      } else {
        console.log("是当前页面");
      }
    },
    goproduct() {
      this.$router.push({ name: "product" });
    },
    goabout() {
      // this.$router.push({path:"/about",params:{id:10}});
      this.$router.push({ name: "about", params: { id: 10 } });
    },
    goback(){
      this.$router.back();
      // go(-1)
    },
    gohistory1(){
      // go 传数字 ： 0 当前页面  正数是 前进的历史记录  负数是回退的历史记录
      this.$router.go(-2);
    },
     gohistory2(){
      // go 传数字 ： 0 当前页面  正数是 前进的历史记录  负数是回退的历史记录
      this.$router.go(2);
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.myactive {
  background: red;
}
</style>
